'use client';

import { useState, useEffect } from 'react';

export function useMediaQuery(query) {
    const [matches, setMatches] = useState(false);

    useEffect(() => {
        const media = window.matchMedia(query);

        // 更新状态
        const updateMatches = e => {
            setMatches(e.matches);
        };

        // 设置初始值
        setMatches(media.matches);

        // 添加监听器
        if (media.addListener) {
            // 旧版浏览器支持
            media.addListener(updateMatches);
        } else {
            // 新版浏览器支持
            media.addEventListener('change', updateMatches);
        }

        // 清理函数
        return () => {
            if (media.removeListener) {
                // 旧版浏览器支持
                media.removeListener(updateMatches);
            } else {
                // 新版浏览器支持
                media.removeEventListener('change', updateMatches);
            }
        };
    }, [query]);

    return matches;
}
